{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-pane-warp">
		<el-form ref="config" :model="config" :rules="rules" label-width="150px">
			<el-form-item label="SMTP服务器地址：" prop="smtp">
				<el-input v-model="config.smtp" placeholder="如：smtp.qq.com"></el-input>
			</el-form-item>
			<el-form-item label="发件人邮箱：" prop="email">
				<el-input v-model="config.email" placeholder="如：xxxx@qq.com"></el-input>
			</el-form-item>
			<el-form-item label="发件人名字：" prop="sender">
				<el-input v-model="config.sender" placeholder="如：OneKeyAdmin"></el-input>
			</el-form-item>
			<el-form-item label="客户端授权密码：" prop="password">
				<el-input type="password" v-model="config.password" show-password></el-input>
				例：获取QQ邮箱客户端授权密码，登录<a href="https://mail.qq.com/" target="_blank">QQ邮箱</a>->点击首页左上角设置->账户->账户安全->生成授权码
			</el-form-item>
			<el-form-item label="协议方式：" prop="sendstyle">
				<el-radio-group v-model="config.sendstyle">
					<el-radio label="ssl">ssl协议</el-radio>
					<el-radio label="tls">tls协议</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div class="el-bottom">
			<el-button 
				size="medium"
				:loading="loading" 
				type="primary" 
				icon="el-icon-refresh-right" 
				@click="save()">
				保 存
			</el-button>
		</div>
	</div>
</div>
<script>
	new Vue({
	    el: '#app',
	    data() {
	        return {
	        	url: "config/email",
	        	config: {:json_encode($config)},
	        	loading: false,
	        	rules: {
                    smtp: [
                        { required: true, message: '请输入SMTP服务器地址', trigger: 'blur' },
                    ],
                    email: [
                        { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
                    ],
                    sender: [
                        { required: true, message: '请输入发件人名字', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入客户端授权密码', trigger: 'blur' },
                    ],
	        	}
	        }
	    },
	    methods: {
	        /**
             * 保存基础配置
             */
	        save() {
	        	let self = this;
	        	self.$refs.config.validate((valid) => {
                    if (valid) {
                        self.loading = true;
        	        	request.post(self.url, {config: self.config}, function(res){
                            self.loading = false;
                            self.$notify({showClose: true, message: res.message, type: res.status});
                        });
                    } else {
                        return false;
                    }
                });
	        },
	    }
	})
</script>
{include file="common/footer"}